<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, maximum-scale=1, user-scalable=no" charset="UTF-8">
  <link rel="stylesheet" href="android_asset://css/style.css"/>
  <link rel="stylesheet" href="android_asset://css/font.css"/>
  <title>工单详情</title>
</head>
<body>
  <div class="order_detail">
    <div class="top">
    <div class="items">
      <h4>报修详情</h4>
      <div class="item">
        <ul>
          <li>
            <h5 class="left"><span class="icon-jobinfo"></span>工单详情
            </h5>
            {% if ticket.priority == 0%}
            	{% if respondTime == "2" or respondTime == "4" %}	
	            <div class="ts">
	                <i class="ts_text">优先</i>
	                <i class="ts_text2">{{respondTime}}小时</i>
	            </div>
	            {% endif %}
            {% elseif ticket.priority == 1 %}
            	<div class="ts">
	                <i class="ts_text">优先</i>
	                {% if respondTime == "2" or respondTime == "4" %}
	                	<i class="ts_text2">{{respondTime}}小时</i>
	                {% endif %}
	             </div>
            {% else %}
            	<div class="ts">
	                <i class="ts_text">优先</i>
	                {% if respondTime == "2" or respondTime == "4" %}
	                	<i class="ts_text2">{{respondTime}}小时</i>
	                {% endif %}
	            </div>
            {% endif %}
          </li>
          <li>
            <p class="left">
              <b class="left">工单名称：</b>
              <span class="block">{{ticket.caption}}</span>
            </p>
          </li>
          <li class="lineheight">
            <p class="file_p"><b class='left'>工单编号：</b><span class="block">{{ticket.id}}</span></p>
            <p class="file_p"><b class='left'>故障分类：</b><span class="block">{{ticketEx.chrsystem}} > {{ticketEx.chrcategory}} > {{ticketEx.chrtype}}</span></p>
            <p class="file_p"><b class='left'>响应时间：</b><span class="block">{{respondLevel}}</span></p>
            <p class="file_p"><b class='left'>严重程度：</b><span class="block">{% if ticket.severity==0 %}一级{% elseif ticket.severity==1 %}二级{% elseif ticket.severity==2 %}三级{% elseif ticket.severity==3 %}四级{% elseif ticket.severity==4 %}五级
            {% endif %}
            </span></p>
          </li>
          <li>
            <p>
              <b class="left">故障描述：</b>
              <span class="block">{{ticketEx.description}}</span>
            </p>
          </li>
          <li>
            <p>
              <b class="left">备注信息：</b>
              {% if ticketEx.changenottobeview == 1 %}
              	<span class="block" style="color:red">{{ticketEx.surveynote}}  (备注刚刚更新了 ::>_<::)</span>
              {% elseif ticketEx.surveynotechanged == 1 %}
              	<span class="block" style="color:red">{{ticketEx.surveynote}}</span>
              {% else %}
              	<span class="block">{{ticketEx.surveynote}}</span>
              {% endif %}
            </p>
          </li>
        </ul>
      </div>
      <div class="item">
        <ul>
          <li>
            <h5 class="left"><span class="icon-customer"></span>客户信息</h5>
            <div class="right">
              <!--<p class="left navigation"><span class="icon-navigation"></span>导航</p>-->
              <p class="right call">
              	<span class="icon-phone" onclick="call('{{ticketEx.customermobile}}','{{ticketEx.customerphone}}')" ></span>
              	电话
          	  </p>
            </div>
          </li>
          <li>
              <div class="left name">请求客户：</div>
              <div class="left width75">
                <p><span class="icon-customer1"></span><i> {{ticketEx.customername}} {{ticketEx.chruserid}}</i></p>
                <p><span class="icon-phone1"></span>                 
                   <i>
                   	  {% if ticketEx.customermobile is not null and ticketEx.customerphone is not null %}
                   		{{- ticketEx.customermobile -}}/{{- ticketEx.customerphone -}}
               		  {% elseif ticketEx.customermobile is not null %}
               		  	{{- ticketEx.customermobile -}}
               		  {% elseif ticketEx.customerphone is not null %}
               		  	{{- ticketEx.customerphone -}}
               		  {% endif%}
                   </i>
                </p>
                <p><span class="icon-navigation1 left"></span><em class="block">{{ticketEx.cityname}}-{{ticketEx.customeraddress}}</em></p>
              </div>
          </li>
         {% if ticketEx.address is not null %}
          <li class="actual-cust">
              <div class="left name">最终客户：</div>
              <div class="left width75">
                <p><span class="icon-customer1"></span><i>{{ticketEx.actuallcustomer}}</i></p>
                <p><span class="icon-phone1"></span><i>{{ticketEx.actuallcustomerphone}}</i></p>
                <p><span class="icon-navigation1 left"></span><em class="block">{{ticketEx.cityname}}-{{ticketEx.address}}</em></p>
              </div>
          </li>
          {% endif %}
        </ul>
      </div>
      <!-- <a href="./project_info.html"> -->
      <div class="pinfo">
        <p class="left">
            <span class="icon-proinfo"></span>项目信息
        </p>
        <p class="right">
            {{ticketEx.projectname}}
        </p>
      </div>
     <!--  </a> -->
    </div>
    {% if ticket.status!=0 and ticket.status!=1 %}
    <div class="items">
      <h4>维修详情</h4>
				<a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/ticketparts')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>设备信息
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a> </a> <a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/solution')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>解决方案
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a> <a href="javascript:void(0);"
					onclick="msAndroid.get('/tickets/{{ticket.id}}/attachmentInfo')">
					<div class="pinfo">
						<p class="left">
							<span class="icon-eqinfo"></span>附件信息
						</p>
						<p class="right">
							详细信息<span class="icon-rightarrow"></span>
						</p>
					</div>
				</a>
			</div>
    {% endif %}
    {% if ticket.status!=0 and ticket.status!=1 %}
    <div class="items" id="order">
      <h4>流程信息</h4>
      	<ul class="process">
      	{% for ticketEventPO in ticketEventPOs %}
      		<!-- 判断是否是抢单，接单，下次再约 -->
      		{% if ticketEventPO.action=='confirm' %}
      			<!-- 判断是否是下次再约-->
      			{% if ticketEventPO.content.pendingcause is not null %}
      				<li class="clearfix over">
			          <span class="left"><i class="icon-circular"></i> 再约</span>
			          <div class="left width68">
			            <p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
			            <p>改约原因：{{ticketEventPO.content.pendingcause}}</p>
			            <p>改约时间：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
			          </div>
			          <div class="right"><span class="icon-yes2"></span></div>
			        </li>
      			{% else %}
      				<li class="clearfix over">
			          <span class="left"><i class="icon-circular"></i> {% if ticket.policy == 0 %}派单{% else %}抢单{% endif %}</span>
			          <div class="left">{% if ticket.policy == 0 %}派单{% else %}抢单{% endif %}：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</div>
			          <div class="right"><span class="icon-yes2"></span></div>
			        </li>
      			{% endif %}
      		<!--判断是否是预约 -->
      		{% elseif ticketEventPO.action=='appoint' %}
	      		<li class="clearfix over">
		          <span class="left"><i class="icon-circular"></i> 预约</span>
		          <div class="left width68">
		            <p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
		            <p>到场时间：{{ticketEventPO.content.appointment}}</p>
		            <p>事前提醒：{% if ticketEventPO.content.remindTime is null %}无{% else %}{{ticketEventPO.content.remindTime}}{% endif %}</p>
		            <p>上门地址：{{ticketEx.cityname}}-{{ticketEventPO.content.address}} </p>
		            <p>随手记　：{% if ticketEventPO.content.pendingcause is null %}无{% else %}{{ticketEventPO.content.pendingcause}}{% endif %}</p>
		          </div>
		          <div class="right"><span class="icon-yes2"></span></div>
		        </li>
      		<!-- 判断是否为改约 -->
      		{% elseif ticketEventPO.action=='reappoint' %}
	      		<li class="clearfix over">
		          <span class="left"><i class="icon-circular"></i> 改约</span>
		          <div class="left width68">
		            <p>{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
		            <p>到场时间：{{ticketEventPO.content.pendingtime}}</p>
		            <p>事前提醒　　：{% if ticketEventPO.content.remindTime is null %}无{% else %}{{ticketEventPO.content.remindTime}}{% endif %}</p>
		            <p>上门地址：{{ticketEx.cityname}}-{{ticketEventPO.content.address}} </p>
		            <p>改约原因　　：{% if ticketEventPO.content.pendingcause is null %}无{% else %}{{ticketEventPO.content.pendingcause}}{% endif %}</p>
		          </div>
		          <div class="right"><span class="icon-yes2"></span></div>
		        </li>
      		<!-- 判断是否为签到 -->
      		{% elseif ticketEventPO.action=='signin' %}
	      		<li class="clearfix over">
		          <span class="left"><i class="icon-circular"></i> 到场</span>
		          <div class="left">
		          	{% if ticketEventPO.content.signtype=='0' %}自动签到{% else %}拍照签到{% endif %}：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}
		          </div>
		          <div class="right"><span class="icon-yes2"></span></div>
		        </li>
      		<!-- 判断是否为完成 -->
      		{% elseif ticketEventPO.action=='finish' %}
	      		<li class="clearfix over">
		          <span class="left"><i class="icon-circular"></i> 完成</span>
		           <div class="left">
		          		已完成：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}
		           </div>
		          <div class="right"><span class="icon-yes2"></span></div>
		        </li>
      		<!-- 判断是否为评价 -->
      		{% elseif ticketEventPO.action=='evaluate' %}
	      		<li class="clearfix on">
		          <span class="left"><i class="icon-circular"></i> 评价</span>
		          	<div class="left">{% if ticketEx.attachment_requirements == "1" %}已评价待审核：{% else %}已评价关单：{% endif %}{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</div>
		          	<div class="right"><span class="icon-yes2"></span></div>
		        </li>
      		{% elseif ticketEventPO.action=='breakoff' %}
	      		<li class="clearfix over">
		          <span class="left"><i class="icon-circular"></i> 关单</span>
		          	<div class="left width68">
		          		<p>已快速关单：{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</p>
		          		<p>关单原因：{{ticketEventPO.content.backreasonapp}}</p>
		          	</div>	
		          	<div class="right"><span class="icon-yes2"></span></div>
		        </li>
	        {% elseif ticketEventPO.action=='rework' %}
      		<li class="clearfix over">
	          <span class="left"><i class="icon-circular"></i> 工单返工</span>
	          <div class="left">{{ticketEventPO.eventTime | date("yyyy-MM-dd HH:mm:ss")}}</div>
	          <div class="right"><span class="icon-yes2"></span></div>
	        </li>
      		{% endif %}
      	{% endfor %}
      </ul>
    </div>
    {% endif %}
    </div>
    <div class="bottom">
    {% if ticket.status!=0 and ticket.status!=1 %}
      <div class="flows">
        <ul class="flowsheet">
         {% set flag = 0 %}
         {% for activity in ticketProcess.activityList %}
           {% if ticketProcess.currentActivity.activityId == activity.activityId  %}
               {% set flag = 1 %}
           {% endif %}
          <li class="left">
            <div class="left pp">
            {% if flag == 0 %}
               <div class="circle green">
            {% elseif flag==1 and ticketProcess.currentActivity.activityId == activity.activityId %}
               <div class="circle blue">
            {% else %}
               <div class="circle">
            {% endif %} 
                <span class="{{activity.icoUrl}}"></span>
              </div>
              <p class="textp">{{activity.activityName}}</p>
            </div>
            {% if flag == 0 %}
            <div class="line left"><div class="wire green"></div></div>
            {% else %}
            <div class="line left"><div class="wire"></div></div>
            {% endif %}
          </li>
         {% endfor %}
          
          
  <!--         <li class="left">
            <div class="left pp">
              <div class="circle green">
                <span class="icon-phone"></span>
              </div>
              <p class="textp">预约</p>
            </div>
            <div class="line left">
              <div class="wire green"></div>
            </div>
          </li>
          <li class="left">
            <div class="left pp">
              <div class="circle orange">
                <span class="icon-address"></span>
              </div>
              <p class="textp">到场</p>
            </div>
            <div class="line left">
              <div class="wire"></div>
            </div>
          </li>
          <li class="left">
            <div class="left pp">
              <div class="circle">
                <span class="icon-yes"></span>
              </div>
              <p class="textp">完成</p>
            </div>
            <div class="line left">
              <div class="wire"></div>
            </div>
          </li>
          <li class="left">
            <div class="left pp">
              <div class="circle">
                <span class="icon-smile"></span>
              </div>
              <p class="textp">评价</p>
            </div>
            <div class="line left">
              <div class="wire"></div>
            </div>
          </li> -->
        </ul>
    </div>
    {% endif %}
    
    {% if ticket.status==1 %}
    <div class="footer">
      <button class="left length color_1" onclick="msAndroid.get('/tickets/{{ticket.id}}/backOrder')"><a href="javascript:;" class="f_color">退单</a></button>
      <button class="right color_2" onclick="acceptTicket(this)"><a href="javascript:;">接单</a></button>
    </div>
    {% elseif ticket.status==0 %}
    <div class="confirm">
	  <button class='color_2' type="submit" onclick="grabTicket(this)"><a href="javascript:;">立即抢单</a></button>
	</div>
    {% else %}
    <div class="footer">
      <button class="left length color_1" onclick="msAndroid.flowMore()"><a href="javascript:;" class="f_color">更多</a></button>
      {% if ticketProcess.currentActivity.actionForm is not null and ticketProcess.currentActivity.actionForm != ""%}
      <button class="right color_2" onclick="msAndroid.get('/tickets/{{ticket.id}}/{{ticketProcess.currentActivity.activityId}}/activepage')">
      {% else %}
      <button class="right color_2" onclick="signIn(this)">
      {% endif %}
        <a href="javascript:;" >{{ticketProcess.currentActivity.activityName}}</a>
      </button>
    </div>
    {% endif %}
  </div>
</body>
<script src="android_asset://jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="android_asset://jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="android_asset://jquery.touchSwipe.min.js" type="text/javascript"></script>
<script src="android_asset://bridge.js" type="text/javascript"></script>
<script src="android_asset://android.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
	  $('div.pinfo').on('keydown touchstart', function () {
		  $(this).css("background", '#e0e0e5');
	  });
	  $('div.pinfo').on('keyup touchend', function () {
	      $(this).css("background", '#fff');
	  });
	  $('button.color_1').on('keydown touchstart', function () {
		  $(this).css("background", '#e0e0e5');
	  });
	  $('button.color_1').on('keyup touchend', function () {
	      $(this).css("background", '#fff');
	  });
	  $('button.color_2').on('keydown touchstart', function () {
		  $(this).css("background", '#216cb9');
	  });
	  $('button.color_2').on('keyup touchend', function () {
	      $(this).css("background", '#3e8ddd');
	  });
});

	//接单
	function acceptTicket(el){
		msAndroid.post('/tickets/{{ticket.id}}/confirm',{},'put','0');
		el.disabled = true;
	}
	//抢单
	function grabTicket(el){
		msAndroid.post('/tickets/{{ticket.id}}/grab',{action:'grab'},'put','0')
		el.disabled = true;
	}
	
	roll();
	var win=$(".circle").width();
	$(".circle").css({
	  "height":win,
	  'lineHeight':win+'px'
	});
	var flowhig = $('.flowsheet').outerHeight();
	$('.flows').css({ "height":flowhig });
	$('.flowsheet li:last-child').find('.line').addClass('hidden');
	
	/*滚动效果*/
	$(document).ready(function() {
	    var top = $("#order").offset().top;
	    $('.flows').on('touchend',function(){
	      $('body').animate({scrollTop:top},300);
	    });  
	});
	
	
	//滑动效果
	function roll(){
	    var length=$('.flowsheet li').size(),
	        index = $('.blue').parents('li').index(),
	        wh=100*length+"%", 
	        lt=(100/length/5), 
	        lt_li=lt+"%",
	        y=0, 
	        w=length-5;
	    if(index>4){
	      tab(length-index);
	      y = -lt*index;
	    }
	    $('.flowsheet').width(wh); 
	    $('.flowsheet li').width(lt_li);        
	    $(".flowsheet").swipe( { 
	      swipeLeft:function() {
	        console.log(-lt*w);
	        if(y==-lt*w){
	          return false;
	        }else{
	          y=y-lt;               
	          var t=y+"%";    
	          $(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
	        }
	      }, 
	      swipeRight:function() {
	        if(y==0){
	          return false;  
	        }else{
	          y=y+lt;
	          var t=y+"%";
	          $(this).css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'} ); 
	        }
	      }
	    });
	}
	//超过5个
	function tab(e){
	  var length=$('.flowsheet li').size(),
	      lt=(100/length/5), 
	      t=-(lt*e)+"%";
	      y=-lt*2;                      
	    $('.flowsheet').css({'-webkit-transform':"translate("+t+")",'-webkit-transition':'500ms linear'}) ;
	}  
	//动画变色
	function animate(){
	  var circle = $(".circle"),
	      blue = $(".blue"),
	      wire = $(".wire");
	  blue.addClass("gron").removeClass("blue");
	  setTimeout(function(){
	      $('.gron').addClass('green').removeClass("gron")
	  },500);
	  blue.parents('li').find(wire).addClass("wion");
	  setTimeout(function(){
	      $('.wion').addClass("green").removeClass("wion");
	  },1500);
	  blue.parents('li').next().find(circle).addClass("oron")
	  setTimeout(function(){
	      $('.oron').addClass("blue").removeClass("oron");
	  },2000)
	}
	
	msAndroid.pageData={latitude:"{{ticket.latitude}}",longitude:"{{ticket.longitude}}",ticketId:"{{ticket.id}}",activityId:"{{ticketProcess.currentActivity.activityId}}",actionForm:"{{ticketProcess.currentActivity.actionForm}}"};
	/**
	 * 流程页面更多按钮
	 */
    msAndroid.flowMore = function(){
		 var data = {actionCode:11, data:[
		 	{% if ticketProcess.currentActivity.activityKey == "appoint"%}
		 		{actionId:2, actionName:"快速关单", icon:"/image/more/close_on.png"},
		 		{actionId:3, actionName:"项目组", icon:"/image/more/group_on.png"},
		 		{actionId:4, actionName:"上传附件", icon:"/image/more/upload_on.png"}
		 	{% endif %}
		 	{% if ticketProcess.currentActivity.activityKey == "signin"%}
		 		{actionId:1, actionName:"改约", icon:"/image/more/changeDate_on.png"},
		 		{actionId:2, actionName:"快速关单", icon:"/image/more/close_on.png"},
		 		{actionId:3, actionName:"项目组", icon:"/image/more/group_on.png"},
		 		{actionId:4, actionName:"上传附件", icon:"/image/more/upload_on.png"}
		 	{% endif %}
		 	{% if ticketProcess.currentActivity.activityKey == "resolve"%}
		 		{actionId:1, actionName:"改约", icon:"/image/more/changeDate_on.png"},
		 		{actionId:2, actionName:"快速关单", icon:"/image/more/close_on.png"},
		 		{actionId:3, actionName:"项目组", icon:"/image/more/group_on.png"},
		 		{actionId:4, actionName:"上传附件", icon:"/image/more/upload_on.png"}
		 	{% endif %}
		 	{% if ticketProcess.currentActivity.activityKey == "customerFeedback"%}
		 		{actionId:3, actionName:"项目组", icon:"/image/more/group_on.png"},
		 		{actionId:4, actionName:"上传附件", icon:"/image/more/upload_on.png"}
		 	{% endif %}
          ]};
		  window.WebViewJavascriptBridge.send(
		      data,function(responseData) {
		          var option = eval('(' + responseData + ')');
		          if(option.status == 1){
		              var id = option.data.actionId;
		              if(id == 1){
		            	  toActivityByUrl("/tickets/{{ticket.id}}/{{ticketProcess.currentActivity.activityId}}/changeAppoint");
		              }else if(id == 2){
		            	  toActivityByUrl("/tickets/{{ticket.id}}/breakoff");
		              }else if(id == 3){
		            	  toActivityByUrl("/tickets/{{ticket.id}}/projectPage");
		              } else if(id == 4){
		            	  toActivityByUrl("/tickets/{{ticket.id}}/uploadPage");
		              }
		          }
		      }
		  );
	};
	//拨打电话
	var selectedPhone = 0;
	function call(mobile,phone,event){
		var e=event || window.event;
	    var phones = [];
	    if(mobile != '' && mobile != null){
	    	phones.push(mobile);
	    }
	    if(phone != '' && phone != null){
	    	phones.push(phone);
	    }
	    if(phones.length == 0) return;
	    var menu = [];
	    for (var i = 0; i < phones.length; i++) {
	    	menu.push({text:phones[i],value:phones[i],index:i});
		}
    	menu.push({text:"取消",value:"取消",index:menu.length});
    	
	    msAndroid.menu(menu,function(response){
	    	var obj=eval('('+response+')');
	    	if(obj.status==1) {
	    		if(obj.data.index == phones.length){
	    			return;
	    		}else{
	    			selectedPhone = obj.data.index;
	    			msAndroid.call(obj.data.text,e);
	    		}
	    	}else{
				toast(obj.message);
			}
	    },selectedPhone);
	};
	//$(function(){
		//signIn();
	//});
</script>
</html>